{[{define "system/appi/index.html"}]}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>

    <link rel="stylesheet" href="/static/admin/css/public.css" media="all">
    <link rel="stylesheet" href="/static/plugs/lay-module/layuimini/layuimini.css" media="all">
    <link rel="stylesheet" href="/static/plugs/lay-module/layuimini/themes/default.css" media="all">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div>
            <button class="layui-btn" id="btn-expand">全部展开</button>
            <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
            <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
        </div>
    </div>
</div>

<script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="addChild">添加下级</a>
    <a class="layui-btn layui-btn-xs layui-btn-success" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="toolbar">

    <a class="layui-btn layui-btn-sm layuimini-btn-primary " lay-event="refresh" ><i class="fa fa-refresh"></i> </a>
    <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add" ><i class="fa fa-plus"></i> 添加</a>
   <!-- <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delall" ><i class="fa fa-trash-o"></i> 删除</a>-->

</script>

<script type="text/html" id="statusSwitch">
    <!--0:禁用; 1:启用 -->
    {{# if (d.status == 1) { }}
      <input type="checkbox" name="status" id="{{d.id}}" value="{{d.status}}" lay-skin="switch" lay-text="禁用|启用" lay-filter="statusDemo" checked >
    {{# } else { }}
      <input type="checkbox" name="status" id="{{d.id}}" value="{{d.status}}" lay-skin="switch" lay-text="禁用|启用" lay-filter="statusDemo" >
    {{# } }}

</script>

<script src="/static/layuimini/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="/static/layuimini/js/lay-config.js" charset="utf-8"></script>
<script>
    layui.use(['table', 'treetable','sh'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;
        var form = layui.form;
        var sh = layui.sh;

        form.on('switch(statusDemo)', function (obj) {
            var id=this.id;
            var status=0;
            if(obj.elem.checked){ status=1}

            sh.request.get(
                {
                    url: '/system/appi/status',
                    data: {id: id,status:status },
                }, function (res) {
                    console.log(res)
                    if (res.code == 200) {
                        sh.msg.success('操作成功', function () {

                        });
                    } else {
                        sh.msg.error(data.msg, {icon: 2});
                    }
                }
            );
        });

        var renderTable = function () {
            // 渲染表格
            layer.load(2);
            treetable.render({
                method:"post",
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'id',
                treePidName: 'pid',
                elem: '#munu-table',
                url: '/system/appi/list',
                page: true,
                toolbar: '#toolbar',
                id: 'currentTableRenderId',
                cols: [[
                    {field: 'id', width: 80,title: '标识ID'},
                    {field: 'title',width: 260, title: '权限名称'},
                    {field: 'href',width: 200, title: '菜单url'},
                    {field: 'method', title: '提交方式'},
                    {
                        field: 'type', align: 'center', templet: function (d) {
                            if (d.type == 1) {
                                return '<span class="layui-badge layui-bg-gray">菜单</span>';
                            }
                            if (d.type == 2) {
                                return '<span class="layui-badge layui-bg-blue">目录</span>';
                            } else {
                                return '<span class="layui-badge-rim">节点</span>';
                            }
                        }, title: '类型'
                    },
                    {
                        field: 'islogin', align: 'center', templet: function (d) {
                            if (d.islogin == 1) {
                                return '<span class="layui-badge layui-bg-blue">是</span>';
                            } else {
                                return '<span class="layui-badge-rim">否</span>';
                            }
                        }, title: '登录'
                    },
                    {field: 'px', title: '排序', edit: 'text'},
                    {field: 'status', title: '状态', align: 'center', templet: '#statusSwitch', unresize: true},
                    {templet: '#auth-state', width: 200, align: 'center', title: '操作'}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        }

        renderTable();

        $('#btn-expand').click(function () {
            treetable.expandAll('#munu-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#munu-table');
        });

        table.on('edit(munu-table)', function (obj) {
            var value = obj.value,
                data = obj.data,
                id = data.id,
                field = obj.field;
            var _data = {
                id: id,
                field: field,
                px: value,
            };

            sh.request.get(
                {
                    url: '/system/appi/px',
                    data: _data,
                }, function (res) {
                    console.log(res)
                    if (res.code == 200) {
                        sh.msg.success('操作成功', function () {

                        });
                    } else {
                        sh.msg.error(data.msg, {icon: 2});
                    }
                }
            );
        });



        //监听工具条
        table.on('tool(munu-table)', function (obj) {

            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                id = data.id;
                sh.msg.confirm('真的删除行么 id:'+id, function (index) {
                    sh.request.get(
                        {
                            url: '/system/appi/del',
                            data: {id: id},
                        }, function (res) {
                            console.log(res)
                            if (res.code == 200) {
                                sh.msg.success('操作成功', function () {
                                    renderTable();
                                });
                            } else {
                                sh.msg.error(data.msg, {icon: 2});
                            }
                        }
                    );
                    layer.close(index);
                });
            } else if (layEvent === 'edit') {

                var index = layer.open({
                    title: '修改',
                    type: 2,
                    area: ['800px', '600px'],
                    content: '/system/appi/edit?id='+data.id,
                    maxmin: true,
                    moveOut: false,
                    shade: false,
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        if (body.length > 0) {
                            $.each(body, function (i, v) {
                                // todo 优化弹出层背景色修改
                                $(v).before('<style>\n' +
                                    'html, body {\n' +
                                    '    background: #ffffff;\n' +
                                    '}\n' +
                                    '</style>');
                            });
                        }
                    }
                });
                layer.full(index);

            }else if (layEvent === 'addChild') {

                var index = layer.open({
                    title: '添加下级',
                    type: 2,
                    area: ['800px', '600px'],
                    content: '/system/appi/add?pid='+data.id,
                    maxmin: true,
                    moveOut: false,
                    shade: false,
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        if (body.length > 0) {
                            $.each(body, function (i, v) {
                                // todo 优化弹出层背景色修改
                                $(v).before('<style>\n' +
                                    'html, body {\n' +
                                    '    background: #ffffff;\n' +
                                    '}\n' +
                                    '</style>');
                            });
                        }
                    }
                });
                layer.full(index);

            }
            else if (layEvent === 'refresh') {
                layer.msg('刷新' + data.id);
            }
        });

        table.on('toolbar(munu-table)', function (obj) {

            var layEvent = obj.event;
            if (layEvent === 'refresh') {
                renderTable();
            }else if(layEvent === 'add'){
                var index = layer.open({
                    title: '添加',
                    type: 2,
                    area: ['800px', '600px'],
                    content: '/system/appi/add',
                    maxmin: true,
                    moveOut: false,
                    shade: false,
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        if (body.length > 0) {
                            $.each(body, function (i, v) {
                                // todo 优化弹出层背景色修改
                                $(v).before('<style>\n' +
                                    'html, body {\n' +
                                    '    background: #ffffff;\n' +
                                    '}\n' +
                                    '</style>');
                            });
                        }
                    }
                });
                layer.full(index);
            }else if(layEvent === 'delall') {
                layer.msg('全选删除');
            }



        });
    });
</script>
</body>
</html>
{[{end}]}